<template>
	<view class="overall">
		<view class="title">
			<view class="name" @click="handleClickLeft">
				<image src="/static/left.png" style="width: 23px;height: 23px;"></image>
				<view>{{doctor.name}}医生列表</view>
			</view>
		</view>
		<wd-status-tip v-if="dataInfo==null?true:false" image="content" tip="暂无内容" />
		<view class="content" v-if="dataInfo==null?false:true">
			<view class="tow">
				<view>{{dataInfo[0].duties}}{{dataInfo.length}}人</view>
				<view>
					<view v-for="(item,index) in dataInfo" :key="index" @click="page(item)">
						<view>{{item.name}}医生</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		work,
		details
	} from '@/api/index.js';

	function handleClickLeft() {
		uni.navigateBack();
	}

	const dataInfo = ref([]);
	const doctor = ref([]);
	uni.getStorage({
		key: 'doctor',
		success: function(res) {
			console.log(res.data);
			doctor.value = res.data;
			details({
				depart_id: res.data.id,
			}).then(res => {
				console.log(res.data);
				dataInfo.value = res.data;
			});
		}
	});

	function page(item) {
		console.log(item);
		// 医生信息
		uni.setStorage({
			key: 'details',
			data: item,
			success: function() {
				console.log('数据存储成功');
			}
		});
		uni.navigateTo({
			url: '/pages/homepage/homepage'
		})
	}
</script>

<style scoped>
	.overall {
		width: 100%;
		background-color: #FFFFFF;
		min-height: 100vh;
	}

	.title {
		width: 100%;
		height: 180rpx;
		background-color: #00DACA;
		color: white;
		display: flex;
		align-items: center;
	}

	.name {
		display: flex;
		align-items: center;
		font-weight: bold;
		font-size: 42rpx;
		margin-top: 50rpx;
		margin-left: 3%;
	}

	.name>view {
		margin-left: 20rpx;
	}

	.content {
		width: 92%;
		padding: 40rpx 4%;
	}

	.tow {
		width: 100%;
	}

	.tow>view:first-child {
		font-weight: bold;
		font-size: 32rpx;
		color: #505050;
	}

	.tow>view:last-child {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tow>view:last-child>view {
		border: 4rpx #ECECEC solid;
		padding: 8rpx 30rpx;
		border-radius: 8rpx;
	}

	.dorText {
		width: 100%;
		margin-top: 30rpx;
	}

	.dorText>view:first-child {
		font-weight: bold;
		font-size: 32rpx;
	}

	.dorText>view:last-child {
		width: 100%;
		margin-top: 30rpx;
		font-size: 30rpx;
	}
</style>